<template>
	<view class="login">
		<view class="login-logo">
			<image class="login-logo-img" src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="login-input">
			<y-input
				size="small"
				 v-model="userName"
				 type="text"
				 placeholder="请输入用户名"/>
			<y-input 
				size="small"
				v-model="passWord"
				type="password"
				isShowPass
				placeholder="请输入密码"/>
			<view class="login-check">
				<checkbox value="cb" :checked="checkValue" color="#24BA97" style="transform:scale(0.7)" />
				记住密码
			</view>
			<y-button
				 class="wbutton"
				 text="登 录"
				 :rotate="isRotate"
				 bgColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
				 @click="startLogin"
			 />
		</view>
		<view class="login-line">
			<text class="login-line_line"></text>
			<text class="login-line_text">其他登录方式</text>
			<text class="login-line_line"></text>
		</view>
		<view class="login-other">
			<image class="login-other-img" src="@/static/img/wx.svg" mode=""></image>
			<image class="login-other-img" src="@/static/img/QQ.svg" mode=""></image>
			<image class="login-other-img" src="@/static/img/wb.svg" mode=""></image>
		</view>
		<view class="login-change">
			<text class="login-change-register" @click="register">注册用户</text>
			<text class="login-change-reset" @click="reset">修改密码</text>
		</view>
		<view class="login-enter">
			<tn-button 
				backgroundColor="tn-main-gradient-indigo"
				@click="enterPage"
				width="100%">游客访问</tn-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName:'',
				passWord:'',
				isRotate: false,
				checkValue:true
			};
		},
		methods:{
			startLogin(){
				if (this.userName.length == "") {
					 uni.showToast({
							icon: 'none',
							mask:true,
							position: 'top',
							title: '用户名不能为空'
					});
					return;
				}
				if (this.passWord.length == "") {
					uni.showToast({
						icon: 'none',
						mask:true,
						position: 'top',
						title: '密码不能为空'
					});
					return;
				}
				if(this.isRotate){
					uni.showToast({
						icon: 'none',
						mask:true,
						position: 'top',
						title: '不要重复点击'
					});
					return
				}
				let obj = {
					userName:this.userName,
					passWord:this.passWord
				}
				this.isRotate = true
				if(this.checkValue){
					uni.setStorageSync('remember', obj);
				}
				this.$api.Login(obj).then(res => {
					console.log(res)
					if(res.code == 200){
						uni.navigateTo({
							url:'/pages/index/index'
						})
						try {
							uni.setStorageSync('userInfo', res.data.dataValues)
						} catch (e) {
							// error
						}
						this.isRotate = false
					} else {
						this.isRotate = false
						uni.showToast({
							icon: 'none',
							mask:true,
							position: 'top',
							title: res.message
						});
					}
				})
			},
			register(){
				uni.navigateTo({
					url:'/pages/register/index'
				})
			},
			reset(){
				uni.navigateTo({
					url:'/pages/reset/index'
				})
			},
			//游客访问
			enterPage(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		},
		onShow() {
			if(this.checkValue){
				const value = uni.getStorageSync('remember');
				if(value){
					this.userName = value.userName
					this.passWord = value.passWord
				}
			}
		}
	}
</script>

<style lang="scss">
.login{
	padding:20rpx 100rpx;
	&-logo{
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&-img{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
	}
	&-check{
		margin-bottom: 20rpx;
	}
	&-line{
		display: flex;
		justify-content:center;
		align-items: center;
		margin-top: 60rpx;
		font-size: 24rpx;
		&_line{
			width: 20%;
			height: 2rpx;
			background-color: #AAAAAA;
		}
		&_text{
			margin: 0 20rpx;
			color: #AAAAAA;
		}
	}
	&-other{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		&-img{
			width: 80rpx;
			height: 80rpx;
		}
	}
	&-change{
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
		color: #AAAAAA;
		&-register{
			border-right: 1px solid #AAAAAA;
			padding-right: 20rpx;
		}
		&-reset{
			padding-left: 20rpx;
		}
	}
}
</style>
